import { Col, message, Row, Spin } from 'antd';
import { useEffect, useState } from 'react';

import type { FC } from 'react';

import BaseDiv from '@/components/baseDiv';
import PriceCondition from '@/components/PriceCondition';
import type { Product } from '@/services/price';
import { getProductMess } from '@/services/price';

import PriceInfo from './components/priceDifference';
import PriviceInfo from './components/privice';
import styles from './index.less';

const Price: FC = () => {
  const baseStyles: React.CSSProperties = {
    height: 1200,
    background: 'rgba(255, 255, 255, 0.39)',
    opacity: 1,
  };
  const [dataList, setDataList] = useState<Product[]>([]);
  const [loading, setLoading] = useState<boolean>(true);

  const getProduct = () => {
    setLoading(true);
    getProductMess({})
      .then((res) => {
        if (res && res.code === 200) {
          if (res.data.data) {
            setDataList(res.data.data.reverse());
          }
        }
      })
      .catch((res) => message.error(res))
      .finally(() => setLoading(false));
  };

  useEffect(() => {
    getProduct();
  }, []);

  return (
    <BaseDiv baseStyles={baseStyles}>
      <div className={styles.productTitle}>
        <div className={styles.nameStyle}>安灯产品套餐选择</div>
        <div className={styles.infoStyle}>
          可根据您的企业规模业务需求选择合适的套餐，同时我们也提供丰富的个性化定制服务
        </div>
      </div>
      <Spin spinning={loading}>
        <Row className={styles.productInfo} gutter={16}>
          {dataList &&
            dataList.map((item) => {
              return (
                <Col key={Math.random()} className={styles.colMargin} span={6}>
                  <PriceInfo
                    id={item.id}
                    price={item.price}
                    type={
                      item.name.includes('体验')
                        ? 'trail'
                        : item.name.includes('标准')
                        ? 'base'
                        : item.name.includes('高级')
                        ? 'advanced'
                        : ''
                    }
                    infoList={item.description.split('\r\n')}
                    title={item.name}
                  />
                </Col>
              );
            })}

          <Col className={styles.colMargin} span={6}>
            <PriviceInfo
              infoList={['本地私有部署', '7*24小时技术支持', '个性化功能定制', '···']}
              title={'私有云部署'}
            />
          </Col>
        </Row>
        <PriceCondition />
      </Spin>
    </BaseDiv>
  );
};

export default Price;
